<template>
  <div class="crcle__panel">
    <div
      v-for="(item, index) in 4"
      :key="index"
      class="pannel__item"
      :class="[`item-${index + 1}`]"
      @mousedown="handleOperate(index)"
      @mouseup="handleOperate(4)"
      @mouseleave="handleOperate(4)"
    >
      <!-- { 'is--focus': activeTab === tabList[index+1]} -->
    </div>
    <div class="item__inner top">
      <CaretUpOutline />
      前
    </div>
    <div class="item__inner right">
      <CaretForwardOutline />
      右
    </div>
    <div class="item__inner down">
      <CaretDownOutline />
      后
    </div>
    <div class="item__inner left">
      <CaretBackOutline />
      左
    </div>
    <div
      class="pannel__center__back flex justify-center items-center c-[#1e9ae5] "
      style="font-size: 12px;cursor: pointer;"
      >云台<br />回中</div
    >
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
import {
  CaretUpOutline,
  CaretForwardOutline,
  CaretDownOutline,
  CaretBackOutline
} from '@vicons/ionicons5'
export default {
  name: 'ControlPanel',
  components: { CaretUpOutline, CaretForwardOutline, CaretDownOutline, CaretBackOutline },
  emits: { operate: null },
  setup(props, { emit }) {
    const data = reactive({
      direction: ['前', '右', '后', '左'],
      hasClick: false
    })

    const handleOperate = (index) => {
      if (index !== 4) {
        data.hasClick = true
        const list = ['cameraUp', 'cameraRight', 'cameraDown', 'cameraLeft', 'cameraStop']
        emit('operate', list[index])
      } else {
        if (data.hasClick) {
          emit('operate', 'cameraStop')
          data.hasClick = false
        }
      }
    }

    return {
      ...toRefs(data),
      handleOperate
    }
  }
}
</script>
<style lang="less" scoped>
.crcle__panel {
  width: 6.875rem;
  height: 6.875rem;
  position: relative;
  .pannel__item {
    position: absolute;
    width: 50%;
    height: 50%;
    background: #1f366a;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .pannel__item:hover {
    background-color: rgba(0, 132, 255, 0.523);
    border: 2px solid white;

    background-image: linear-gradient(to bottom, #009aff 0%, rgba(92, 190, 255, 0.8) 100%);
  }
  .item__inner {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    position: absolute;
    font-size: 0.75rem;
    font-family: SHSCV;
    font-weight: bold;
    color: #ffffff;
    line-height: 0.75rem;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: none;
    svg {
      color: #ffffff;
    }

    &.top {
      left: 50%;
      top: calc(25% - 0.625rem);
      flex-direction: column;
    }
    &.right {
      top: 50%;
      left: calc(75% + 0.625rem);
      flex-direction: row-reverse;
    }
    &.down {
      left: 50%;
      top: calc(75% + 0.625rem);
      flex-direction: column-reverse;
    }
    &.left {
      top: 50%;
      left: calc(25% - 0.625rem);
    }
  }

  .pannel__center__back {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #f2f7fa, #c5e8ff);
    border: 2px solid #ffffff;
    border-radius: 50%;
  }
  // @for $i from 1 through 4 {
  //   .item-#{$i} {
  //     border-top-left-radius: 100%;
  //     transform-origin: 100% 100%;
  //     transform: rotate(90deg * $i - 45deg);
  //   }
  // }
  .generate-styles(@i) when (@i > 0) {
    .item-@{i} {
      border-top-left-radius: 100%;
      transform-origin: 100% 100%;
      transform: rotate(90deg * @i - 45deg);
    }
    .generate-styles(@i - 1);
  }
  .generate-styles(4);
}
</style>
